<template>
	<div class="box">
		<div class="box-shadow">
			<div class="block-box">
				<div class="public-title">
					<h3>标签</h3>
				</div>
				<ul>
					<nuxt-link v-for="(item, index) in $store.state.tag.list"
							   :key="index"
							   to=""
							   :style="color(index)">{{item.name}}</nuxt-link>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { randomColor } from '@/utils'
export default {
	name: 'tag',
	data() {
		return {}
	},
	computed: {
		// 标签随机颜色
		color: function () {
			return function (index) {
				let obj = {
					color: randomColor(),
					'border-color': randomColor(),
				}
				return obj
			}
		},
	},
}
</script>

<style lang="less" scoped>
	.box {
		padding: 10px;
		ul {
			padding: 15px 0;
			a {
				font-size: 14px;
				padding: 3px;
				margin: 3px;
				display: inline-block;
				border: 1px solid;
				border-radius: 3px;
			}
		}
	}
</style>